Overlays

Parent for all Overlay types. The core concept with an Overlay is that of its location, which is specified as follows:

Connectors
- a value between 0 and 1 inclusive is a proportional value, relative to the length of the Connector's path.
- a value greater than 1 or less than 0 is an absolute value (travel along the path inscribed by the Connector)

For Connectors, the default value is 0.5.

Endpoints
- An array of two values which are proportional to the width and height of the Endpoint.

For Endpoints, the default value is [0.5, 0.5].

Source:
  • overlays-api.js, line 1

Members

<static> Arrow

Draws an arrow, using four points: the head and two tail points, and a foldback point, which permits the tail of the arrow to be indented.

Source:
  • overlays-api.js, line 3

<static> Diamond

This is a specialized instance of Arrow in which jsPlumb hardcodes foldback to 2, meaning the Arrow turns into a Diamond

Source:
  • overlays-api.js, line 11

<static> Label

Provides a text label with which to decorate Connectors or Endpoints.

Source:
  • overlays-api.js, line 15

<static> PlainArrow

This is just a specialized instance of Arrow in which jsPlumb hardcodes foldback to 1, meaning the tail of the Arrow is a flat edge

Source:
  • overlays-api.js, line 7

Methods

<static> Arrow(params, width, length, location, direction, foldback, paintStyle)

Parameters:
Name Type Argument Default Description
params Object

Constructor parameters

width Integer

Width of the tail of the arrow

length Integer

Distance from the tail of the arrow to the head

location Float <optional>
0.5

Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Arrow should appear on the Connector

direction Integer

Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards

foldback Float <optional>
0.623

How far along the axis of the arrow the tail points foldback in to.

paintStyle Object

A style object in the form used for paintStyle values for Endpoints and Connectors.

Source:
  • overlays-api.js, line 5

<static> Diamond(params, width, length, location, direction, paintStyle)

Parameters:
Name Type Argument Default Description
params Object

Constructor parameters

width Integer

Width of the diamond.

length Integer

Length of the diamond.

location Float <optional>
0.5

Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Diamond should appear on the Connector

direction Integer

Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards

paintStyle Object

A style object in the form used for paintStyle values for Endpoints and Connectors.

Source:
  • overlays-api.js, line 13

<static> Label(params, label, cssClass, location)

Parameters:
Name Type Argument Default Description
params Object

Constructor parameters

label String | Function

The text to display. You can provide a function here instead of plain text: it is passed the component as an argument, and it should return a String.

cssClass String <optional>

Optional css class to use for the Label. This is now preferred over using the labelStyle parameter.

location Float <optional>
0.5

Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Label should appear on the Connector

Source:
  • overlays-api.js, line 17

<static> PlainArrow(params, width, length, location, direction, paintStyle)

Parameters:
Name Type Argument Default Description
params Object

Constructor parameters

width Integer

Width of the tail of the arrow

length Integer

Distance from the tail of the arrow to the head

location Float <optional>
0.5

Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the PlainArrow should appear on the Connector

direction Integer

Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards

paintStyle Object

A style object in the form used for paintStyle values for Endpoints and Connectors.

Source:
  • overlays-api.js, line 9